<template>
  <div class="all">
    <header>
      <div @click="back()">
        <img src="../../assets/fff返回.png" alt="">
        <span class="sides" >返回</span>
      </div>
      <div>
      </div>
      <div>
        <span></span>
      </div>
    </header>
    <div class="content">
      <div class="tabBar">
        <div style="display: flex;flex-direction: column;" :class="tabBarIndex == 0 ? 'select' : ''" @click="clickTab(0)">
          平台注册用户
          <a v-show="tabBarIndex == 0 " class="selectHeng"></a>
        </div>
        <div style="display: flex;flex-direction: column;" :class="tabBarIndex == 1 ? 'select' : ''" @click="clickTab(1)">
          非平台注册用户
          <a v-show="tabBarIndex == 1 " class="selectHeng"></a>
        </div>
      </div>
      <div class="box">
        <div class="title">
          <li style="position: relative">
            <img :src="logoSrc" alt="">
          </li>
          <li>
            <p>{{TeamList.team_name}}</p>
            <p style="font-size: 13px;font-weight: 500">
              {{TeamList.NICK_NAME}}  <button class="tagTuandui">团队长</button>
            </p>
            <p style="font-size: 13px;font-weight: 500">
              <span>{{TeamList.MAJOR}}</span>
              <span>|</span>
              <span>{{TeamList.DEPART}}</span>
            </p>
          </li>
        </div>
        <p class="title_text" v-if="doc_name">{{doc_name}}个人团队二维码</p>
        <p class="title_text" v-else>{{TeamList.team_name}}二维码</p>
        <div v-show="tabBarIndex == 0" class="erweima">
          <vue-qr
                  :logo-src="logoSrc"
                  :size="191"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :logoScale=".2"
                  :text="appSrc" />

        </div>
        <div v-show="tabBarIndex ==1" class="erweima">
          <vue-qr
                  :logo-src="logoSrc"
                  :size="191"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :logoScale=".2"
                  :text="appSrcWei" />
        </div>
        <p class="bottom">
          {{text}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import $ from 'jquery'
import HTTP from '../../http/video.http'
export default {
  name: 'TeamOrganCode',
  components: {
    VueQr
  },
  data () {
    return {
      logoSrc: '',
      TeamList: [],
      userid: this.$route.query.userid,
      team_id: this.$route.query.team_id,
      group_id: this.$route.query.group_id,
      doc_user_id: this.$route.query.doc_user_id,
      tabBarIndex: 0,
      qianZhui: HTTP.Http,
      appSrc: '',
      appSrcWei: '',
      doc_name: this.$route.query.doc_name
    }
  },
  computed: {
    text () {
      if (this.tabBarIndex == 0) {
        return '请使用康护到家APP扫一扫，授权团队/机构档案管理'
      } else {
        return '请使用微信扫一扫，新建档案，归档到团队/机构名下'
      }
    }
    // appSrcWei () {
    //   if (this.tabBarIndex == 1) {
    //     return this.qianZhui + 'vue_kfhl/#/profiles?userid=' + this.userid +
    //       '&isAdd=1' +
    //       '&doc_user_id=' + this.doc_user_id +
    //       '&team_id=' + this.team_id
    //   }
    // },
    // appSrc () {
    //   if (this.tabBarIndex == 0) {
    //     // 从网址上截取 userid 后面的值
    //     let json = {
    //       type: 3,
    //       team_id: this.team_id,
    //       group_id: this.group_id,
    //       doc_user_id: this.doc_user_id
    //     }
    //     return JSON.stringify(json)
    //   }
    // }
  },
  mounted () {
    this.getTeamDetail()
    if (!this.group_id) {
      this.group_id = ''
    }
    if (!this.doc_user_id) {
      this.doc_user_id = ''
    }
    // // 从网址上截取 userid 后面的值
    let json = {
      type: 3,
      team_id: this.team_id,
      group_id: this.group_id,
      doc_user_id: this.doc_user_id
    }
    this.appSrc = JSON.stringify(json)

    this.appSrcWei = this.qianZhui + 'vue_kfhl/#/profiles?userid=' + this.userid +
    '&isAdd=1' +
    '&doc_user_id=' + this.doc_user_id +
    '&team_id=' + this.team_id

    this.clickTab(0)
    var height = $(window).height() - $('header').height() - 50 + 'px'
  },
  methods: {
    clickTab (index) {
      this.tabBarIndex = index
      console.log(this.appSrc)
      console.log(this.appSrcWei)
    },
    getTeamDetail () {
      this.$http.Teamdetail({id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.TeamList = res.data.data
            this.logoSrc = res.data.data.team_icon
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 返回
    back () {
      window.history.go(-1)
    }
  },
  updated () {
    this.$nextTick(function () {
      // DOM 现在更新了
      // `this` 绑定到当前实例
    })
  }
}
</script>

<style scoped>
li{
  list-style: none;
}
header{
  height: 12vw;
  color: white;
  background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
}
header div {
  width: 33%;
  display: flex;
  align-items: center;
}
header div:nth-child(2) {
  justify-content: center;
}
header img{
  width: 7px;
  height: 13px;
  margin-left: 15px;
  margin-right: 5px;
}
header span{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
}
.sides{
}
.content{
  width: 100%;
  background-image: url("../../assets/homeBackground.png");
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: top;
  display: flex;
  flex-direction: column;
}
.tabBar{
  background: #FFFFFF;
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  height: 50px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.select{
  color: #1da4f2 !important;
}
.selectHeng{
  width: 40px;
  height: 2px;
  background: #1DA4F2;
  border-radius: 2px;
  position: relative;
  bottom: -10px;
}
.tabBar div{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
}
.tabBar div:first-child{
  border-right: 2px solid #E5E5E5;
}
.content .box{
  width: 90%;
  /*height: 460px;*/
  background: #FFFFFF;
  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.erweima{
  width: 250px;
  height: 250px;
  background: #FFFFFF;
  border: 1px solid #1DA7F2;
  border-radius: 10px;
  margin: 10px auto;
}
.title{
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
}
.sex{
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 999;
}
.sex img{
  width: 15px !important;
  height: 15px !important;
}
.title li{
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  flex-direction: column;
}
.title li:nth-child(1) {
  margin-right: 15px;
}
.title li:nth-child(2) {
  width: 70%;
}
.title p{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  margin-bottom: 5px;
}
/*.title p:nth-child(1){*/
/*  margin-bottom: 5px;*/
/*}*/
.title img{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}
.title_text{
  height: 44px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #1DA4F2;
}
.bottom{
  height: 44px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding: 0 10px;
  box-sizing: border-box;
}
.content,
.erweima,
.title_text,
.bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}
.tagTuandui{
  font-size: 11px;
  min-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #F9BD77, #FFED91);
  border-radius: 19px;
  border: none;
  color: #A8610B;
  margin-left: 10px;
}
</style>
